<!DOCTYPE html>
<html lang="zh-CN">

<head>

  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/vue_2.5.22.js"></script>
  <script src="lib/vue-router_3.0.2.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    #app {
      width: 100%;
      height: 100%;
    }

    #app {
      display: flex;
    }

    .sidebar_left {
      width: 100px;
      height: 100%;
      background-color: cornflowerblue;
    }

    .sidebar_left ul li {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: left;
      padding-left: 15px;
      cursor: pointer;
      border-top: 1px solid #eee;
    }
    li {
      list-style: none;
      cursor: pointer;
    }
    .content_right {
      flex: 1;
      background-color: #eee;
    }
    .settingMenu {
      width: 100%;
      height: 40px;
      display: flex;
      background-color: darkgrey;
    }
    .settingMenu span {
      flex: 1;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <!-- 根组件模板 -->
  <template id="appCom">
    <div style="display: flex; width: 100%; height: 100%;">
      <div class="sidebar_left">
        <ul>
          <router-link to="/home" tag="li">首页</router-link>
          <router-link to="/goods" tag="li">商品</router-link>
          <router-link to="/setting" tag="li">设置</router-link>
        </ul>
      </div>
      <div class="content_right">
        <router-view></router-view>
      </div>
    </div>
  </template>
  <!-- 首页模板 -->
  <template id="homeCom">
    <div class="content_right">
        <div>
          <h1>欢迎进入</h1>
        </div>
    </div>
  </template>
  <!-- 商品模板 -->
  <template id="goodsCom">
    <div>
      <ul>
        <li v-for="(item, index) in goodsList" :key="item.id" @click="goGoodsDetial(item.id, item.goodsName)">{{item.goodsName}}</li>
      </ul>
    </div>
  </template>
  <!-- 设置页模板 -->
  <template id="settingCom">
    <div>
      <div class="settingMenu">
        <span @click="goRights">权限设置</span>
        <span @click="goCompany">公司设置</span>
      </div>
      <router-view></router-view>
    </div>
  </template>
  <!-- 权限模板 -->
  <template id="rightsCom">
    <div>
      权限设置
    </div>
  </template>
  <!-- 公司模板 -->
  <template id="companyCom">
    <div>
      公司设置
    </div>
  </template>
  <!-- 商品详情模板 -->
  <template id="goodsdetailCom">
    <div>
      <div>{{name}} {{id}}</div>
      <button @click="$router.go(-1)" style="width: 80px;">返回</button>
    </div>
  </template>
  <script>
    // 根组件
    const App = {
      template: '#appCom'
    }
    // 首页组件
    const Home = {
      template: '#homeCom'
    }
    // 商品组件
    const Goods = {
      template: '#goodsCom',
      data() {
        return {
          goodsList: [{
            id: 1,
            goodsName: '鞋子'
          },{
            id: 2,
            goodsName: '袜子'
          },{
            id: 3,
            goodsName: '腰带'
          }]
        }
      },
      methods: {
        goGoodsDetial(id, name) {
          this.$router.push({
            path: '/goods/' + id,
            query: {name}
          })
        }
      },
    }
    // 设置组件
    const Setting = {
      template: '#settingCom',
      methods: {
        goRights() {
          this.$router.push('/setting/rights')
        },
        goCompany() {
          this.$router.push('/setting/company')
        }
      },
    }
    // 权限组件
    const Rights = {
      template: '#rightsCom'
    }
    // 公司组件
    const Company = {
      template: "#companyCom"
    }
    // 商品详情页组件
    const GoodsDetail = {
      props: ['id', 'name'],
      template: '#goodsdetailCom'
    }
    const routes = [{
      path: "/",
      component: App,
      children: [{
        path: '/home',
        component: Home
      },{
        path: '/goods',
        component: Goods
      },{
        path: '/setting',
        component: Setting,
        redirect: '/setting/rights',
        children:[{
          path: '/setting/rights',
          component: Rights
        },{
          path: '/setting/company',
          component: Company
        }]
      },{
        path: '/goods/:id',
        component: GoodsDetail,
        props: route => ({
          id: route.params.id,
          name: route.query.name
        })
      }]
    }]
    const router = new VueRouter({
      routes
    })
    const vm = new Vue({
      el: '#app',
      router
    })
  </script>
</body>

</html>